<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>恭喜，站点创建成功！</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .overLayout {
        width: 100%;
    }
    .ListBox {
        position: relative;
        margin: auto;
    }
    .item {
        position: absolute;
        height: auto;
        padding: 5px;
        transition: all 0.5s;
        box-sizing: border-box;
    }
    .item img {
        width: 100%;
        height: auto;
    }
    </style>
</head>

<body>
    <div class="overLayout">
        <div id="ListBox"></div>
    </div>

    <script>
        const colWidth = 300;
        function WaterFall(obj) {
            this.id = obj.id;
            this.imgUrls = obj.imgUrls;
            this.container = document.getElementById(this.id);
            this.container.className = 'ListBox';
        }

        WaterFall.prototype = {
            WFInit: function () {
                let num = 0;
                this.imgUrls.map((item, index) => {
                    let div = document.createElement('div');
                    div.className = 'item'
                    div.style.width = colWidth + 'px';
                    let img = new Image();
                    img.src = item;
                    img.onload = () => {
                        num++;
                        div.appendChild(img);
                        this.container.appendChild(div);
                        if (num === this.imgUrls.length) {
                            this.WFRender();
                        }
                    }
                })
            },
            WFRender: function () {
                let winWidth = window.innerWidth;
                let itemNUm = Math.floor(winWidth / colWidth);
                this.container.style.width = itemNUm * colWidth + 'px';
                let colHeight = [];
                let items = document.querySelectorAll('.item');
                for (var i = 0; i < items.length; i++) {
                    let _item = items[i]
                    if (colHeight.length < itemNUm) {
                        colHeight[i] = _item.offsetHeight;
                        setDiv(_item, colWidth * i, 0)
                    } else {
                        let min = getMiniH(colHeight);
                        colHeight[min.column] += _item.offsetHeight;
                        setDiv(_item, min.left, min.top)
                    }
                }
            }
        }

        function getMiniH(arr) {
            let calc = {
                left: 0,
                top: 0,
                column: 0,
            }
            arr.map((item, i) => {
                if (calc.top === 0) {
                    calc.top = item
                } else {
                    if (calc.top > item) {
                        calc.top = item;
                        calc.left = colWidth * i;
                        calc.column = i;
                    }
                }
            })
            return calc;
        }

        function setDiv(item, left, top) {
            item.style.top = top + 'px';
            item.style.left = left + 'px';
        }

        let waterfall = new WaterFall({
            id: 'ListBox',
            imgUrls: [
                './static/img/img_placeholder_300_300.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_300.png',
                './static/img/img_placeholder_300_300.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_300.png',
                './static/img/img_placeholder_300_300.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_300.png',
                './static/img/img_placeholder_300_300.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_600.png',
                './static/img/img_placeholder_300_500.png',
                './static/img/img_placeholder_300_400.png',
                './static/img/img_placeholder_300_300.png',
            ]
        })

        window.onload = () => {
            waterfall.WFInit();
        }

        window.onresize = () => {
            waterfall.WFRender();
        }
    </script>

</body>

</html>